<template>
  <div class="main">
    <div class="bottom">
                <div class="searchArea">
                    <form action="###" class="searchForm">
                        <input
                        type="text"
                        id="autocomplete"
                        class="input-error input-xxlarge"
                        v-model="keyword"
                        />
                        <button
                        class="sui-btn btn-xlarge btn-danger"
                        type="button"
                        @click="goSearch"
                        >
                        搜索
                        </button>
                    </form>
                </div>
    </div>
    <div class="py-container">
      <div class="details clearfix">
        <div class="goods-list">
          <ul class="yui3-g">
            <li
              class="yui3-u-1-5"
              v-for="(good,index1) in glList"
              :key="good.gid"
            >
              <div class="list-wrap">
                <div class="p-img">
                  <div class="SwiperBox">
                    <img :src="good.gimgpath[ShowImg[index1]]" alt="" />
                    <div class="leftBtn" @click="PrevFun(index1,good.gimgpath.length)">&larr;</div>
                    <div class="rightBtn" @click="NextFun(index1,good.gimgpath.length)">&rarr;</div>
                    <div class="instBox">
                      <div v-for="(item,index2) in good.gimgpath.length" :key="index2"
                          @click="arrimg(index1,index2)" :class="['inst',ShowImg[index1]==index2?'instActv':'']">
                      </div>
                    </div>
                  </div>
                </div>
                <el-divider></el-divider>
                <div class="attr">
                  <a>{{ good.gname}}</a>
                </div>
                <el-divider></el-divider>
                <div class="price">
                  <strong>
                    <em>¥</em>&nbsp;
                    <i>{{ good.gprice }}</i>
                  </strong>
                </div>
                <div class="attr">
                  <el-col :span='16' style="height:200px" v-html=good.ginfo></el-col>
                </div>
                <div class="commit">
                  <i class="command"><span>{{ Gstate(good) }}</span></i>
                </div>
                <div class="commit">
                  <i class="command"><span>{{ "还剩"+good.gstorage+"件" }}</span></i>
                </div>
                <div class="commit">
                  <el-link href="/aftersales" type="primary" style="color: #646fb0;font-weight:700;font-size:13px;" :underline="false">申请售后</el-link>
                </div>
                <el-divider></el-divider>
                <div class="operate">
                  <div v-if="good.gstate==1">
                    <router-link :to="{
                        name:'buy',
                        query:{
                          uid:good.uid,
                          gid:good.gid,
                          gName:good.gname,
                          gPrice:good.gprice,
                          gInfo:good.ginfo,
                          gstorage:good.gstorage,
                          gImgPath:good.gimgpath,
                          otype:0
                        }
                    }" class="sui-btn btn-bordered" id="btn">购买</router-link>
                    <router-link :to="{
                        name:'buy',
                        query:{
                          uid:good.uid,
                          gid:good.gid,
                          gName:good.gname,
                          gPrice:good.gprice,
                          gInfo:good.ginfo,
                          gstorage:good.gstorage,
                          gImgPath:good.gimgpath,
                          otype:1
                        }
                    }" class="sui-btn btn-bordered">租借</router-link>
                    <div class="sui-btn btn-bordered" @click="JiaShop(good.gid)">加入购物车</div>
                    <div class="sui-btn btn-bordered" @click="JiaStar(good.gid)">加入收藏夹</div>
                  </div>
                  <div v-else>
                    <template>交易中，不可购买</template>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="block" v-if="totalCount!=0">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalCount">
    </el-pagination>
  </div>
  </div>
</template>
<script>
import {mapGetters} from 'vuex'
import {jiaStar, jiaShopCart} from "@/api";
export default {
  inject:['reload'],
  name:'Goods',
  data(){
    return{
      keyword:'',
      currentPage:1,
      PageSizes:[10,20,30,40],
      PageSize:10,
      total:null,
      ShowImg:[],  // 表示当前显示的图片
    }
  },
  methods: {
    JiaShop(gid){
      let data = {
        "gid": gid
      }
      jiaShopCart(data).then(res=>{
        this.$message({
          message: res.msg,
          type: 'success'
        });
      })
    },
    JiaStar(gid){
      let data = {
        "gid": gid
      }
      jiaStar(data).then(res=>{
        this.$message({
          message: res.msg,
          type: 'success'
        });
      })
    },
      PrevFun(index,total){
        if(this.ShowImg[index]!==0){
          this.$set(this.ShowImg,index,this.ShowImg[index]-1)
        }else{
          this.$set(this.ShowImg,index,total-1)
        }
      },
      NextFun(index,total){
        if(this.ShowImg[index]!==total-1){
          this.$set(this.ShowImg,index,this.ShowImg[index]+1)
        }else{
          this.$set(this.ShowImg,index,0)
        }
      },
      arrimg(index,index2){
        this.$set(this.ShowImg,index,index2)
      },
    Gstate(good){
      if(good.gstate===0){
        return "冻结";
      }else if(good.gstate===2){
        return "下架";
      }else if(good.gstate===1){
        return "在售";
      }else{
        return ''
      }
    },
    goSearch(){
        this.$axios.get("/api/goodpage",{
                params:{
                    pageNum:this.currentPage,
                    pageSize:this.PageSize,
                    keyword:this.keyword,
                    Type:'displayed'
                }}).then(res =>{
                  //console.log(res.data)
                  if(res.data.code==200){
                    this.total=res.data.data.gtotal
                    this.$store.dispatch("searchGoods",res.data.data.glist)
                  }else{
                    alert(res.data.msg)
                  }    
                }).catch(error =>{
                 // console.log('提交失败')
                  console.log(error )
                })
      
    },
      handleSizeChange(val) {
           // 改变每页显示的条数 
           this.PageSize=val
           this.currentPage=1
           this.goSearch()
       },
         // 显示第几页
       handleCurrentChange(val) {
           // 改变默认的页数
           this.currentPage=val
           this.goSearch()
       },
    },
  computed:{
    ...mapGetters(['gList']),
    glList(){
      //console.log(this.gList)
      return this.gList.filter(
        user => user.gstate!==2
      )
    },
    totalCount(){
      this.total=this.glList.length
      return this.total
    }
  },
  watch:{
    totalCount:{
      immediate:true,
      handler(newValue,oldValue){
          let a = 0;
          for(a=0;a<newValue;a++){
            this.ShowImg[a]=0
          }
          //console.log(this.ShowImg)
      }
    },
    showNum:{
      handler(newValue,oldValue){
          let a = 0;
          for(a=0;a<newValue;a++){
            this.ShowImg[a]=0
          }
      }
    }
  },
  mounted(){
    this.goSearch()
  },
}
</script>
<style lang="less" scoped>
.SwiperBox {
    position: relative;
    width: 215px;
    height: 255px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    cursor: pointer;
  }
  .leftBtn,
  .rightBtn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(109, 109, 109, 0.445);
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
  }
  .leftBtn {
    left: 10px;
  }
  .rightBtn {
    right: 10px;
  }
  .instBox{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 10px;
    display: flex;
  }
  .inst{
    width: 10px;
    height: 10px;
    border: 1px solid #ccc;
    margin-right: 8px;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
  }
  .inst:last-child{
    margin-right: 0px;
  }
  .instActv{
    border: 1px solid #ff0000;
    background: #ff0000;
  }
  .main {
  margin: 10px 0;
  &>.bottom {
            width: 1200px;
            margin: 0 auto;
            overflow: hidden;
            .searchArea {
                float: right;
                margin-top: 0px;

                .searchForm {
                    overflow: hidden;

                    input {
                        box-sizing: border-box;
                        width: 490px;
                        height: 32px;
                        padding: 0px 4px;
                        border: 2px solid #ea4a36;
                        float: left;

                        &:focus {
                            outline: none;
                        }
                    }

                    button {
                        height: 32px;
                        width: 68px;
                        background-color: #ea4a36;
                        border: none;
                        color: #fff;
                        float: left;
                        cursor: pointer;

                        &:focus {
                            outline: none;
                        }
                    }
                }
            }
        }
  .block{
            width: 1200px;
            margin: 0 auto;
            overflow: hidden;
  }
  .py-container {
    width: 1200px;
    margin: 0 auto;

    .details {
      margin-bottom: 5px;
      .goods-list {
        margin: 20px 0;
        
        ul {
          display: flex;
          flex-wrap: wrap;
          
          li {
            height: 100%;
            width: 20%;
            margin-top: 10px;
            line-height: 28px;
            border-style:solid;
            border-width:1px;

            .list-wrap {
              
              .p-img {
                padding-left: 15px;
                width: 215px;
                height: 255px;

                  img {
                    max-width: 215px;
                    height: 255px;
                    vertical-align: middle;
                  }
                
              }

              .price {
                padding-left: 15px;
                font-size: 18px;
                color: #c81623;
                strong {
                  font-weight: 700;
                  i {
                    margin-left: -5px;
                  }
                }
              }

              .attr {
                padding-left: 15px;
                width: 85%;
                overflow: hidden;
                margin-bottom: 8px;
                min-height: 38px;
                cursor: pointer;
                line-height: 1.8;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;

              }

              .commit {
                padding-left: 15px;
                height: 22px;
                font-size: 13px;
                color: #a7a7a7;

                span {
                  font-weight: 700;
                  color: #646fb0;
                }
              }

              .operate {
                padding: 12px 15px;

                .sui-btn {
                  display: inline-block;
                  padding: 2px 14px;
                  box-sizing: border-box;
                  margin-bottom: 0;
                  font-size: 12px;
                  line-height: 18px;
                  text-align: center;
                  vertical-align: middle;
                  cursor: pointer;
                  border-radius: 0;
                  background-color: transparent;
                  margin-right: 15px;
                }

                .btn-bordered {
                  min-width: 85px;
                  background-color: transparent;
                  border: 1px solid #8c8c8c;
                  color: #8c8c8c;

                  &:hover {
                    border: 1px solid #666;
                    color: #fff !important;
                    background-color: #666;
                    text-decoration: none;
                  }
                }

                .btn-danger {
                  border: 1px solid #e1251b;
                  color: #e1251b;

                  &:hover {
                    border: 1px solid #e1251b;
                    background-color: #e1251b;
                    color: white !important;
                    text-decoration: none;
                  }
                }
              }
            }
          }
        }
      }
    }

    
  }
}
</style>




